<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input type="text" />
        <script>
            let input = document.querySelector('input');
            input.addEventListener('keyup', debounce(submit, 1500, true));
            function submit(e) {
                // console.log(e);
                // console.log(e.target);
                // console.log(1);
                console.log(input.value);
            }
            function debounce(fn, time, triggleNow) {
                let timer = null;
                return function () {
                    if (timer) clearTimeout(timer);
                    if (triggleNow) {
                        // console.log(!timer);
                        let firstClick = !timer;
                        if (firstClick) {
                            fn.apply(this, arguments);
                        }
                        timer = setTimeout(() => {
                            timer = null;
                        }, time);
                    } else {
                        timer = setTimeout(() => {
                            fn.apply(this, arguments);
                            timer = null;
                        }, time);
                    }
                };
            }
        </script>
    </body>
</html>
